<template>
    <div class="login-container">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
            label-position="left">

            <div class="title-container">
                <h3 class="title">Login Form</h3>
            </div>

            <el-form-item prop="loginName">

                <el-input ref="loginName" v-model="loginForm.loginName" placeholder="请输入用户名" name="username" type="text"
                    tabindex="1" autocomplete="on">
                    <template #prefix>
                        <el-icon :size="20" class="mr-1">
                            <IconIcRoundSupervisorAccount />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input ref="password" v-model="loginForm.password" type="password"
                    placeholder="请输入密码" name="password" tabindex="2" autocomplete="on" >
                    <template #prefix>
                        <el-icon :size="20" class="mr-1">
                            <IconIcBaselinePassword />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>


            <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
                @click="handleLogin">Login</el-button>

        </el-form>


    </div>
</template>
  
<script>
import { usePermissionStoreHook } from "@/store/permission"
import storage from '@/utils/storage'

export default {
    name: 'Login',
    components: {},
    data() {
        return {
            loginForm: {
                loginName: 'admin',
                password: 'admin'
            },
            loginRules: {},
            loading: false,
        }
    },
    watch: {

    },
    created() {
        // window.addEventListener('storage', this.afterQRScan)
    },
    mounted() {
        if (this.loginForm.loginName === '') {
            this.$refs.loginName.focus()
        } else if (this.loginForm.password === '') {
            this.$refs.password.focus()
        }
    },
    destroyed() {
        // window.removeEventListener('storage', this.afterQRScan)
    },
    methods: {
        handleLogin() {
            storage.clear()
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    // var data = {
                    //     ...this.loginForm,
                    //     clientId: 'book',
                    //     clientSecure: 'vdCO'
                    // }
                    const permissionStore = usePermissionStoreHook()
                    permissionStore.login(this.loginForm).then(() => {
                        this.$router.push({ path:  '/' })
                        this.loading = false
                      })
                      .catch(() => {
                        this.loading = false
                      })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>
  
<style lang="scss">
.login-container {
    height: 100vh;
    width: 100%;
    background-color: #2d3a4b;
    overflow: hidden;

    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }
}
</style>
  